<template>
	<view class="user-model">
		<!-- 个人头像 -->
		<view class="userinfo-wrap">
			<view class="avatar-box">
				<u-avatar src="" size="94rpx"></u-avatar>
				<view class="info">
					<view class="nickname">点击授权昵称</view>
					<view class="mobile">15426357548</view>
				</view>
			</view>
			<u-avatar src="" size="94rpx"></u-avatar>
		</view>
		<!-- 我的支付宝卡卷 -->
		<view class="ticket-box">
			<view class="title-box">
				<view class="title">我的支付宝卡卷</view>
				<view class="check">查看</view>
			</view>
		</view>
		<!-- 积分 -->
		<view class="integral-box">
			<u-cell isLink>
				<template #title>
					<text class="cell-text">我的积分</text>
				</template >
				<template #value>
					<text class="cell-value">60</text>
				</template >
			</u-cell>
			<view class="icon-list">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(item, i) in orderIconList" :key="i">
						<view class="icon-item">
							<view class="a-icon">
								<u-image :src="item.icon" width="54rpx" height="54rpx"></u-image>
							</view>
							<view class="a-title">{{item.name}}</view>
						</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
	
	<view class="content-box">
		<view class="receive-range">
			<view class="title">回收范围查询</view>
			<view class="tip">比旧衣更多</view>
		</view>
		
		<view class="manage-title">账户管理</view>
		<view class="mine-icon-list">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item, i) in manageIconList" :key="i">
					<view class="icon-item">
						<view class="a-icon">
							<u-image :src="item.icon" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="a-title">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="manage-title">更多功能</view>
		<view class="mine-icon-list">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item, i) in moreIconList" :key="i">
					<view class="icon-item">
						<view class="a-icon">
							<u-image :src="item.icon" width="80rpx" height="80rpx"></u-image>
						</view>
						<view class="a-title">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { reactive } from 'vue';
	import icon1 from '@/static/images/a15.png'
	import icon2 from '@/static/images/a16.png'
	import icon3 from '@/static/images/a17.png'
	import icon4 from '@/static/images/a18.png'
	
	import icon5 from '@/static/images/a19.png'
	import icon6 from '@/static/images/a20.png'
	import icon7 from '@/static/images/a21.png'
	import icon8 from '@/static/images/a22.png'
	
	import icon9 from '@/static/images/a23.png'
	import icon10 from '@/static/images/a24.png'
	import icon11 from '@/static/images/a25.png'
	import icon12 from '@/static/images/a25.png'
	// 订单icon
	const orderIconList = reactive([
		{name: '全部订单', icon: icon1, id: 0},
		{name: '进行中', icon: icon2, id: 0},
		{name: '已完成', icon: icon3, id: 0},
		{name: '商品订单', icon: icon4, id: 0},
	])
	// 账户管理icon
	const manageIconList = reactive([
		{name: '我的积分', icon: icon5, id: 0},
		{name: '地址管理', icon: icon6, id: 0},
		{name: '线下账号绑定', icon: icon7, id: 0},
		{name: '完善信息', icon: icon8, id: 0},
	])
	// 更多功能icon
	const moreIconList = reactive([
		{name: '最新动态', icon: icon9, id: 0},
		{name: '联系客服', icon: icon10, id: 0},
		{name: '会员卡', icon: icon11, id: 0},
		{name: '家庭维修', icon: icon12, id: 0},
	])
</script>

<style lang="scss" scoped>
	.user-model {
		position: relative;
		width: 100%;
		height: 463rpx;
		background: #05C160;
		padding: 70rpx 30rpx;

		.ticket-box {
			position: absolute;
			bottom: 24rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 601rpx;
			height: 241rpx;
			background: linear-gradient(216deg, #5A5A5A 0%, #0C0C0C 100%);
			border-radius: 27rpx;
			padding: 26rpx 54rpx;
			z-index: 999;

			.title-box {
				@include flex-between(100%);

				.title {
					color: #F2B77F;
					font-size: 26rpx;
				}

				.check {
					@include flex-center(68rpx, 30rpx);
					background: linear-gradient(208deg, #FAD3AB 0%, #F2B77F 100%);
					border-radius: 16rpx;
					font-size: 19rpx;
					color: #565757;
				}
			}
		}

		.integral-box {
			position: absolute;
			bottom: -120rpx;
			left: 50%;
			transform: translateX(-50%);
			z-index: 999;
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 19rpx 0rpx rgba(164, 164, 164, 0.25);
			border-radius: 28rpx;
			width: 680rpx;
			padding: 26rpx 26rpx 40rpx;
			.cell-text {
				color: #1F1F1F;
				font-size: 26rpx;
			}
			.cell-value {
				color: #F7824D;
				font-size: 32rpx;
			}
			.icon-list {
				margin-top: 45rpx;
				.icon-item {
					@include flex-center();
					flex-direction: column;
					.a-title {
						color: #1F1F1F;
						font-size: 24rpx;
						margin-top: 20rpx;
					}
				}
			}
		}
	}

	.userinfo-wrap {
		@include flex-between(100%);

		.avatar-box {
			display: flex;
			align-items: center;

			.info {
				margin-left: 22rpx;
				color: #fff;

				.nickname {
					font-size: 32rpx;
				}

				.mobile {
					font-size: 28rpx;
					margin-top: 16rpx;
				}
			}
		}
	}
	.content-box {
		padding: 0 35rpx;
		.receive-range {
			margin-top: 150rpx;
			padding: 26rpx;
			background: #FFFFFF;
			border-radius: 27rpx;
			color: #219088;
			.title {
				font-size: 32rpx;
			}
			.tip {
				font-size: 20rpx;
				margin-top: 24rpx;
			}
		}
		.manage-title {
			margin: 48rpx 0 53rpx;
			color: #4B4B4B;
			font-size: 32rpx;
		}
		.mine-icon-list {
			.icon-item {
				@include flex-center();
				flex-direction: column;
				.a-title {
					color: #4B4B4B;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
	
</style>